<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            height: 100px;
            width: 100%;
            background: black;
            color: white;
            text-align: center;
            line-height: 100px;
        }
    </style>
</head>
<body>
    <div id="result"></div>
<script type="text/javascript">
    // 首先得到静态效果
    //  然后得到本地时间
    function timer() {
        var time = new Date();
        time = time.toLocaleString();//转换成字符串
        console.log(time);
        // 把得到的时间传入到div中
        document.getElementById("result").innerHTML = time;
    }

    timer();//这里先调用一次的原因是，会出现一秒的延迟
    // 每隔一秒执行一次
    setInterval(timer,1000);

</script>

</body>
</html>